<script setup>
import { inject } from 'vue';



const props = defineProps({
    refreshable: Boolean    //是否显示刷新按钮
})

const { backward, forward, refresh } = inject('appRoute')
</script>

<template>
    <div class="navigator">
        <svg @click="backward" width="18" height="18" viewBox="0 0 455.71 818.05" xmlns="http://www.w3.org/2000/svg">
            <g id="Layer_2" data-name="Layer 2">
                <g id="Layer_1-2" data-name="Layer 1">
                    <path
                        d="M101.17,405.1c2.89,1.94,5,2.89,6.47,4.41Q274.29,576.23,440.9,743c13.06,13.06,18.24,28.17,12.47,46-9.58,29.54-46.92,38.79-69.57,17.37-7.87-7.44-15.35-15.29-23-23L15.22,437.44C-5,417.2-5.07,392.34,15,372.23Q193.44,193.58,371.81,14.88C380.93,5.74,391.29-.19,404.44,0c17.18.25,30.24,8,37.94,23.27,7.79,15.43,6.19,30.66-3.89,44.78a60.83,60.83,0,0,1-6.7,7.4Q269.45,238,107.05,400.5C105.77,401.78,104.18,402.76,101.17,405.1Z" />
                </g>
            </g>
        </svg>
        <svg @click="forward" width="18" height="18" class="spacing" viewBox="0 0 455.71 818.08"
            xmlns="http://www.w3.org/2000/svg">
            <g id="Layer_2" data-name="Layer 2">
                <g id="Layer_1-2" data-name="Layer 1">
                    <g id="Layer_2-2" data-name="Layer 2">
                        <g id="Layer_1-2-2" data-name="Layer 1-2">
                            <path
                                d="M354.54,413c-2.89-1.94-5-2.89-6.47-4.41Q181.42,241.85,14.81,75.08C1.75,62-3.43,46.91,2.34,29.08,11.92-.46,49.26-9.71,71.91,11.71c7.87,7.44,15.35,15.29,23,23L440.49,380.64c20.22,20.24,20.29,45.1.22,65.21Q262.27,624.5,83.9,803.2c-9.12,9.14-19.48,15.07-32.63,14.88-17.18-.25-30.24-8-37.94-23.27C5.54,779.38,7.14,764.15,17.22,750a61.07,61.07,0,0,1,6.7-7.4q162.34-162.55,324.74-325C349.94,416.3,351.53,415.32,354.54,413Z" />
                        </g>
                    </g>
                </g>
            </g>
        </svg>
        <svg v-show="refreshable" class="spacing" @click="refresh" width="22" height="22" viewBox="0 0 639.99 732.03"
            xmlns="http://www.w3.org/2000/svg">
            <g id="Layer_2" data-name="Layer 2">
                <g id="Layer_1-2" data-name="Layer 1">
                    <path
                        d="M479.44,134.48c-5.08-19.94-9.88-38.77-14.67-57.6-3.24-12.73-6.79-25.4-9.6-38.23A31.79,31.79,0,0,1,517,23.85c5.13,19.12,9.89,38.34,14.79,57.53q18.4,72.06,36.77,144.12c.32,1.26.49,2.56.84,4.42-7.37,1.93-14.54,3.85-21.73,5.68Q456.27,259,364.85,282.25c-15.7,4-30.42-2.18-37.47-15.56-6.93-13.16-4.06-29.51,7.49-39A35.82,35.82,0,0,1,348,220.94c32.33-8.56,64.76-16.72,97.15-25,2.39-.61,4.75-1.31,7.12-2,.15-.52.31-1.05.46-1.58-13-6.13-25.76-12.94-39.09-18.28-36.45-14.61-74.53-20.64-113.59-17-85.64,8.09-152.15,48.54-198.16,121.3C73.08,324,60.12,374.49,64.5,428.08c8.1,99.16,57.39,171.64,146.57,216.12,35.77,17.84,74.23,25.25,114.16,24.54,119.41-2.11,222.53-88.31,246-205.4a261.86,261.86,0,0,0,3.73-77.56c-1.89-19.23,10.24-34.95,28.4-36.75s33,11.32,34.95,30.55c6.89,69.52-7,134.69-42.57,194.7-44,74.17-107.93,123.51-191.06,146.2C230.57,768,54.37,664.51,9.73,489.5c-43.75-171.56,64.39-349,237-388.6,80.15-18.37,156.42-7.65,228.68,31.56C476.37,133,477.41,133.48,479.44,134.48Z" />
                </g>
            </g>
        </svg>
    </div>
</template>

<style scoped>
.navigator {
    display: flex;
    align-items: center;
}

.navigator .spacing {
    margin-left: 16px;
}

.navigator svg {
    fill: var(--button-icon-btn-color);
    cursor: pointer;
    -webkit-app-region: none;
}

.navigator svg:hover {
    fill: var(--content-highlight-color);
}
</style>